<template>
	<!-- 生产信息页面 -->
	<view>
		<view class="p-10">
			<u-collapse :value="showMoreKeys" ref="collapse">
				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">原煤产量计划</text></view>
					</template>
					<my-grid :list="list" :decimals="2" :col="2" imgWidth="25%"></my-grid>
					<view class="charts-box">
						<qiun-data-charts type="column" ontouch :opts="opts" :chartData="chartData" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="2">
					<template #title>
						<view class="content-item-title"><text class="title-txt">剥离土方量计划</text></view>
					</template>
					<my-grid :list="list1" :decimals="2" :col="2" imgWidth="25%"></my-grid>
					<view class="charts-box">
						<qiun-data-charts type="column" ontouch :opts="opts1" :chartData="chartData1" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="3">
					<template #title>
						<view class="content-item-title"><text class="title-txt">设备维修统计</text></view>
					</template>
					<my-grid :list="list2" :col="2" imgWidth="25%"></my-grid>
					<view class="charts-box">
						<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" />
					</view>
				</u-collapse-item>
			</u-collapse>
			<up-back-top :scroll-top="scrollTop"></up-back-top>
		</view>
	</view>
</template>

<script setup>
/**************************************请求数据逻辑*************************************************/
import { getApiFabric, getByApiCode } from '@/api/customApi';
const showMoreKeys = ref([1, 2, 3, 4]),
	collapse = ref(null);

/**************************************返回顶部*************************************************/
const scrollTop = ref(0);
onPageScroll((e) => {
	scrollTop.value = e.scrollTop;
});

/**************************************原煤产量计划 & 剥离土方量计划*************************************************/
let list = ref([
		{
			key: 'YProductionPlanVal',
			title: '本年度计划生产原煤',
			value: 0,
			unit: '万吨',
			img: 'index/bnjhsc.png'
		},
		{
			key: 'YProductionVal',
			title: '本年度累计生产原煤',
			value: 0,
			unit: '万吨',
			img: 'index/bnljsc.png'
		},
		{
			key: 'MProductionVal',
			title: '本月累计生产原煤',
			value: 0,
			unit: '万吨',
			img: 'index/byljsc.png'
		},
		{
			key: 'DProductionVal',
			title: '昨日生产原煤',
			value: 0,
			unit: '万吨',
			img: 'index/zrsc.png'
		}
	]),
	list1 = ref([
		{
			key: 'YStripPlanVal',
			title: '本年度计划剥离量',
			value: 0,
			unit: '万立方',
			img: 'index/bnjhbl.png'
		},
		{
			key: 'YStripVal',
			title: '本年度累计剥离量',
			value: 0,
			unit: '万立方',
			img: 'index/bnljbl.png'
		},
		{
			key: 'MStripVal',
			title: '本月累计剥离量',
			value: 0,
			unit: '万立方',
			img: 'index/byljbl.png'
		},
		{
			key: 'DStripVal',
			title: '昨日剥离量',
			value: 0,
			unit: '万立方',
			img: 'index/zrbl.png'
		}
	]);

function fn() {
	getApiFabric({
		apiCode: '9e852b3e-32e4-499c-91fb-c8ac3d3719c4',
		propertyMapping: {
			s: 'name',
			y: 'val'
		}
	}).then((res) => {
		res.data.forEach((item) => {
			item.key = item.s;
			item.val = item.y;
			delete item.s;
			delete item.y;
		});
		const data = ArrayToObj(res.data);
		list.value.forEach((item) => {
			item.value = data[item.key] || 0;
		});
		list1.value.forEach((item) => {
			item.value = data[item.key] || 0;
		});
		nextTick(() => {
			collapse.value.init();
		});
	});
}

const chartData = ref({}),
	opts = {
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [20, 0, 0, 0],
		enableScroll: true,
		legend: {
			show: true,
			position: 'top',
			padding: 0,
			margin: 10,
			fontSize: 12,
			itemGap: 10
		},
		xAxis: {
			itemCount: 4
		},
		yAxis: {
			showTitle: true,
			gridType: 'dash',
			data: [
				{
					min: 0,
					title: '产量/万吨',
					titleOffsetY: -10,
					titleOffsetX: 10
				}
			]
		},
		extra: {
			column: {
				width: 20,
				linearType: 'opacity',
				linearOpacity: 0.5
			}
		}
	};

const chartData1 = ref({}),
	opts1 = {
		...opts,
		yAxis: {
			showTitle: true,
			gridType: 'dash',
			data: [
				{
					min: 0,
					title: '产量/万立方',
					titleOffsetY: -10,
					titleOffsetX: 10
				}
			]
		}
	};

function fn1() {
	getApiFabric({
		apiCode: '57d5b9c9-b6d8-4c59-acde-564e22a8bfbc',
		propertyMapping: {
			x: 'month',
			y1: 'actual',
			y2: 'plan'
		}
	}).then((res) => {
		const resData = res.data.reduce(
			(prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(cur.y1);
				prev.series2.push(cur.y2);
				return prev;
			},
			{
				categories: [],
				series1: [],
				series2: []
			}
		);
		chartData.value = {
			categories: resData.categories,
			series: [
				{
					name: '实际',
					data: resData.series1
				},
				{
					name: '计划',
					data: resData.series2
				}
			]
		};
		nextTick(() => {
			collapse.value.init();
		});
	});

	getApiFabric({
		apiCode: 'd30298d8-301d-4ec6-b316-24417c7bd27a',
		propertyMapping: {
			x: 'x',
			y1: 'y1',
			y2: 'y2'
		}
	}).then((res) => {
		const resData = res.data.reduce(
			(prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(cur.y1);
				prev.series2.push(cur.y2);
				return prev;
			},
			{
				categories: [],
				series1: [],
				series2: []
			}
		);
		chartData1.value = {
			categories: resData.categories,
			series: [
				{
					name: '实际',
					data: resData.series1
				},
				{
					name: '计划',
					data: resData.series2
				}
			]
		};
		nextTick(() => {
			collapse.value.init();
		});
	});
}

/**************************************设备维修统计*************************************************/
let list2 = ref([
	{
		key: 'tmonthNumber',
		title: '本月完成维修任务',
		value: 0,
		unit: '次',
		img: 'index/bywc.png'
	},
	{
		key: 'guessNumber',
		title: '本月预测维修任务',
		value: 0,
		unit: '次',
		img: 'index/byyc.png'
	}
]);

function fn2() {
	getApiFabric({
		apiCode: 'f3f1a957-a774-4254-bf21-a463d600d526',
		propertyMapping: {
			s: 'name',
			y: 'val'
		}
	}).then((res) => {
		res.data.forEach((item) => {
			item.key = item.s;
			item.val = item.y;
			delete item.s;
			delete item.y;
		});
		const data = ArrayToObj(res.data);
		list2.value.forEach((item) => {
			item.value = data[item.key] || 0;
		});
		nextTick(() => {
			collapse.value.init();
		});
	});
}

const chartData2 = ref({}),
	opts2 = {
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [0, 0, 0, 0],
		dataLabel: true,
		legend: {
			show: false,
			position: 'top',
			padding: 0,
			margin: 10,
			fontSize: 12,
			itemGap: 10
		},
		title: {
			name: 0,
			fontSize: 25,
			color: '#000'
		},
		subtitle: false,
		extra: {
			ring: {
				ringWidth: 30,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: true,
				borderWidth: 3,
				borderColor: '#FFFFFF',
				linearType: 'custom'
			}
		}
	};

function fn3() {
	getApiFabric({
		apiCode: '5ac10527-e0fe-4340-8da8-c2021b51d0de',
		propertyMapping: {
			name: 'name',
			s: 's',
			y: 'val'
		}
	}).then((res) => {
		let total = 0;
		res.data.forEach((item) => {
			item.value = item.y * 1;
			total = total + item.value;
			delete item.s;
			delete item.y;
		});
		opts2.title.name = total;
		chartData2.value = {
			series: [
				{
					data: res.data
				}
			]
		};
		nextTick(() => {
			collapse.value.init();
		});
	});
}

function getServerData(refresh) {
	Promise.all([fn(), fn1(), fn2(), fn3()]).then(() => {
		if (refresh) {
			nextTick(() => {
				uni.stopPullDownRefresh();
			});
		}
	});
}

onShow(() => {
	getServerData();
});

onPullDownRefresh(() => {
	getServerData(true);
});
</script>

<style scoped lang="scss"></style>
